<template>
  <div>
    <nav-bar title="违章查询">
      <template v-slot:right>
        <span @click="illegal" v-show="user && user.userType === '01'">统计</span>
      </template>
    </nav-bar>
    <div class="maxinBox">
      <div>
        <van-search
          v-show="user && user.userType === '01'"
          v-model="value"
          show-action
          placeholder="请输入姓名"
          @search="onSearch"
        >
        </van-search>
        <van-cell title="违章时间" :value="date" @click="show = true" />
        <van-calendar v-model="show" type="range" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />
        <div class="illegalQuery">
          <van-row class="illegalBox backgroundfff" style="padding: 0.9375rem;" v-for="(item, index) in illegalList" :key="index">
           <van-col :span="7">
              <img v-if="item.headUrl" style="width:90%" :src="item.headUrl" @click="bigImg(item.headUrl)" alt="">
            </van-col>
            <van-col :span="11" class="fontSize14">
              <div>{{item.builderName}}</div>
              <div>{{item.workTypeName}}  {{item.teamName}}</div>
              <div>{{item.mobile}}</div>
              <div>{{item.behaviorText}}</div>
            </van-col>
            <van-col :span="6" class="fontSize12">
              <p>{{item.illegalDate | formatDate}}</p>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import moment from 'moment'
  import illgalAPI from '../../../api/workAPI/illegalQueryAPI.js'
  import {ImagePreview} from 'vant'
  let scan = null;
  export default {
    data() {
      return {
        user: {
          userStatus: '',
          userType: '',
        },
        minDate: new Date((2010, 0, 1)),
        maxDate: new Date(),
        date: '',
        show: false,
        value: '',
        startDate: '',
        endDate: '',
        illegalList: []
      };
    },
    methods: {
      // 放大图片
      bigImg(img) {
        ImagePreview({
           images: [img],
        })
      },
      illegal() {
        this.$router.push({
          path: '/IllegalStatistical'
        })
      },
      // 查询违章列表
      getIllegalList() {
        let data = {
          pageNum: 1,
          pageSize: 500,
          name: this.value,
          beginTime: this.startDate,
          endTime: this.endDate
        }
        illgalAPI.getIllegalList(data).then(res => {
          this.illegalList = res
        })
      },
      formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
      },
      onConfirm(date) {
        const [start, end] = date;
        this.show = false;
        this.date = `${moment(this.formatDate(start)).format('YYYY/MM/DD')} - ${moment(this.formatDate(end)).format('YYYY/MM/DD')}`;
        this.startDate = moment(this.formatDate(start)).format('YYYY-MM-DD')
        this.endDate = moment(this.formatDate(end)).format('YYYY-MM-DD')
        this.getIllegalList()
      },
      // 关键字搜索
      onSearch(val) {
        this.value = val
        this.getIllegalList()
      }
    },
    mounted() {
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      this.getIllegalList()
    }
  }
</script>
<style lang="scss" scoped>
  .van-cell__value{
    flex: 2
  }
  .illegalBox {
    border-bottom: 0.0625rem solid #E5E5E5;
  }
</style>
